<template>
  <div style="margin: 0 20px">
    <el-input :value="roleName" :disabled="true"></el-input>
    <!-- 树形组件 -->
    <el-tree
      :data="roleAuthList"
      show-checkbox
      node-key="id"
      :default-expand-all="true"
      :default-checked-keys="selectId"
      :props="defaultProps"
      style="margin: 20px 0"
      ref="tree"
    >
    </el-tree>
    <el-button type="primary" @click="updateRoleAuth">保存</el-button>
    <el-button @click="cancel">取消</el-button>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "RoleAuth",
  data() {
    return {
      // 树形组件要循环的项跟展示的名称
      defaultProps: {
        children: "children",
        label: "name",
      },
      // 要发送到后台的选中id的列表
      idList: [],
    };
  },
  computed: {
    ...mapState("assign", ["roleAuthList"]),
    roleName() {
      return this.$route.query.roleName;
    },
    // 计算出选中的ID列表
    selectId() {
      // 定义一个空数组
      const idList = [];
      // 调用递归方法, 计算出选中的节点的id数组,存储到idList中
      this.recursion(this.roleAuthList, idList);
      return idList;
    },
  },
  methods: {
    // 获取角色权限的函数
    getRoleAuthInfo() {
      // 派发action
      this.$store.dispatch("assign/getRoleAuth", this.$route.params.id);
    },
    // 递归函数, 找到被选中的叶子节点
    recursion(arr, idList) {
      // map遍历数组
      arr.map((item) => {
        // 判断是否是叶子节点
        if (item.children.length > 0) {
          // 不是, 则递归遍历下去
          this.recursion(item.children, idList);
        } else {
          // 是, 则判断叶子节点是否选上
          if (item.select) {
            // 选上,则将该叶子节点的id push到idList中
            idList.push(item.id);
          }
        }
      });
    },
    // 点击取消,
    cancel() {
      // 返回角色管理页面
      this.$router.push({
        name: "Role",
      });
      // 点击取消,返回角色管理页面时, 清空当前角色存储在仓库中的权限数据
      this.$store.commit("assign/CLEAR");
    },
    // 更新角色的权限
    async updateRoleAuth() {
      // 整合要发送给服务器的数据
      // this.$refs.tree.getCheckedKeys() 获取被选中的节点的 key 所组成的数组
      // this.$refs.tree.getHalfCheckedKeys() 获取半选中的节点的key所组成的数组
      // 最终要发送给服务器的数组
      const permissionIdArr = this.$refs.tree
        .getCheckedKeys()
        .concat(this.$refs.tree.getHalfCheckedKeys());
      const str = permissionIdArr.join(",");
      const params = {
        roleId: this.$route.params.id,
        permissionId: str,
      };
      try {
        // 派发action
        await this.$store.dispatch("assign/updateRoleAuth", params);
        // 成功提示信息
        this.$message({
          message: "保存成功",
          type: "success",
        });
        // 跳转回角色管理页面
        this.cancel();
      } catch (error) {
        // 失败提示信息
        this.$message({
          message: "保存失败",
          type: "error",
        });
      }
    },
  },
  mounted() {
    // 页面挂载完毕,获取角色权限数据
    this.getRoleAuthInfo();
  },
};
</script>

<style>
</style>